<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/common.css" type="text/css">
</head>
<body>
    <div id="app">
        <!-- <img :src="imgUrl" alt=""> -->


        <!-- <div :class="{'bgcolor':hasColor, 'forecolor':hasNum}" > -->
        <!-- <div :class="[hasColor?'bgcolor':'',colorCls]"> -->
        <!-- <div :class="clsProp">
            
            <h1>hhhhhhhhh</h1>
        </div> -->



        <!-- <p v-if="age===18">18岁的我</p>
        <p v-else-if="age===20">懵懵懂懂</p>
        <p v-else>还是很憧憬未来</p>
        <template v-if="age===18">
            <p>加油</p>
        </template>
        <template v-else-if="age===20">
            <p>奥力给</p>
        </template>
        <template v-else>
            <p>你可以</p>
        </template> -->


        <!-- 列表的循环结果 -->
        <ul>
            <li v-for="(f,index) of friutSort">{{index+1}}-{{f.name}}-{{f.price}}</li>
        </ul>
        <ul>
            <li v-for="(u,key,index) in user">{{index+1}}-{{key}}-{{u}}</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
       var app=new Vue({
           el:'#app',
           data:{
            //    imgUrl:"imgs/u=1021698570,4055706443&fm=26&gp=0.jpg",
            //    hasColor:true,
            //    hasNum:false, //控制台改变样式
            //    //bgcolorCls:this.hasColor?'bgcolor':'', //三元表达式
            //    colorCls:'forecolor'  

            age:18,
            friuts:[
                {name:'苹果',price:8},
                {name:'西瓜',price:10},
                {name:'芒果',price:20},
                {name:'梨子',price:5},
                {name:'荔枝',price:15},
                {name:'香蕉',price:25}

            ],
            user:{
                username:'hhw',
                password:'123456',
                telphone:'15777365554'
            }

           },
           //计算属性
           computed:{
               bgcolorCls:function(){
                   return this.hasColor?'bgcolor':''
               },
               clsProp:function(){
                   return{
                       bgcolor:this.hasColor,
                       forecolor:this.hasNum
                   }
               },
               //数组的排序
               friutSort:function(){
                   return this.friuts.sort(function(a,b){
                       return a.price-b.price;
                   })
               }
           }
       })
        
    </script>
</body>
</html>